<!DOCTYPE html>
<meta name="color-scheme" content="light dark">
<script src="../../../../resources/run-after-layout-and-paint.js"></script>
<script src="../../resources/common.js"></script>
<body>
<style>
  #vertical {
    -webkit-appearance: slider-vertical;
  }

  #no-appearance {
    -webkit-appearance: none;
  }
  #no-appearance::-webkit-slider-thumb {
    -webkit-appearance: none;
  }
</style>

<!-- no style for reference -->
<ul>
  <li>Range: <input type="range" /><input value=0 type="range" /><input value=100 type="range" /></li>
</ul>

<ul>
  <li>Range value=30: <input type="range" value="30"/></li>
</ul>

<ul>
    <li>Range webkit-appearance:none: <input type="range" id="no-appearance"/></li>
</ul>

<ul>
  <li>Range vertical: <input type="range" value="30" id="vertical" /></li>
</ul>

<!-- disabled -->
<ul>
  <li>Range disabled: <input type="range" disabled/></li>
</ul>

<!-- hover -->
<ul>
  <li>Range hover: <input type="range" id="hoverTarget"/></li>
</ul>

<!-- datalist -->
<ul>
  <li>Range datalist: <input type="range" min="0" max="100" list="number" /></li>
  <li>Range datalist disabled: <input type="range" min="0" max="100" list="number" disabled /></li>
  <datalist id="number">
    <option>10</option>
    <option>30</option>
    <option>50</option>
    <option>70</option>
    <option>90</option>
  </datalist>
</ul>

<!-- zoom -->
<ul>
  <li>Range zoom: 3: <input type="range" style="zoom: 3;"/></li>
  <li><input type="range" value=0 style="zoom: 3;" /></li>
</ul>

<script>

runAfterLayoutAndPaint(function() {
  var target = document.getElementById('hoverTarget');
  hoverOverElement(target);
}, true);

</script>

</body>
